<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>jQuery实现漂亮的购物车</title>
  <link href="shopcart.css" rel="stylesheet">
  <script src="js/jquery-3.5.1.js"></script>
</head>

<body>
  <div class="page-shopping-cart" id="shopping-cart">
    <h4 class="cart-title">我的购物清单</h4>
    <div class="cart-product-title clearfix">
      <!--{'check-true':isSelectAll}-->
      <div class="td-check fl"><span class="check-span fl check-all check-true"></span>全选</div>
      <div class="td-product fl">商品</div>
      <div class="td-num fl">数量</div>
      <div class="td-price fl">单价(元)</div>
      <div class="td-total fl">金额(元)</div>
      <div class="td-do fl">操作</div>
    </div>
    <div class="cart-product clearfix">
      <table>
        <tbody>
          <!--          <tr>
            <td class="td-check"><span class="check-span check-true"></span></td>
            <td class="td-product"><img width="98" height="98" src="timg.png">
              <div class="product-info">
                <h6>iphone6s</h6>
                <p>品牌：iphone&nbsp;&nbsp;产地：美国</p>
                <p>配送仓储：上海仓库</p>
              </div>
              <div class="clearfix"></div>
            </td>
            <td class="td-num">
              <div class="product-num">
                <a href="javascript:;" class="num-reduce num-do fl"><span></span></a>
                <input type="text" class="num-input" value="1" readonly>
                <a href="javascript:;" class="num-add num-do fr"><span></span></a>
              </div>
            </td>
            <td class="td-price">
              <p class="red-text">￥<span class="price-text">2000.00</span></p>
            </td>
            <td class="td-total">
              <p class="red-text">￥<span class="total-text">2000</span>.00</p>
            </td>
            <td class="td-do">
			   <a href="javascript:;" class="product-btn green">收藏</a>
			   <a href="javascript:;" class="product-btn">移除</a>
			</td>
          </tr>
		  <tr>
            <td class="td-check"><span class="check-span check-true"></span></td>
            <td class="td-product"><img width="98" height="98" src="shoe.png">
              <div class="product-info">
                <h6>vans板鞋</h6>
                <p>品牌：vans&nbsp;&nbsp;产地：美国</p>
                <p>配送仓储：上海仓库</p>
              </div>
              <div class="clearfix"></div>
            </td>
            <td class="td-num">
              <div class="product-num">
                <a href="javascript:;" class="num-reduce num-do fl"><span></span></a>
                <input type="text" class="num-input" value="3" readonly>
                <a href="javascript:;" class="num-add num-do fr"><span></span></a>
              </div>
            </td>
            <td class="td-price">
              <p class="red-text">￥<span class="price-text">400.00</span></p>
            </td>
            <td class="td-total">
              <p class="red-text">￥<span class="total-text">1200</span>.00</p>
            </td>
            <td class="td-do">
			 <a href="javascript:;" class="product-btn green">收藏</a>
			<a href="javascript:;" class="product-btn">移除</a>
			</td>
          </tr>
		  
		  <tr>
            <td class="td-check"><span class="check-span check-true"></span></td>
            <td class="td-product"><img width="98" height="98" src="pidai.png">
              <div class="product-info">
                <h6>皮带</h6>
                <p>品牌：lv&nbsp;&nbsp;产地：韩国</p>
                <p>配送仓储：广州仓库</p>
              </div>
              <div class="clearfix"></div>
            </td>
            <td class="td-num">
              <div class="product-num">
                <a href="javascript:;" class="num-reduce num-do fl"><span></span></a>
                <input type="text" class="num-input" value="4" readonly>
                <a href="javascript:;" class="num-add num-do fr"><span></span></a>
              </div>
            </td>
            <td class="td-price">
              <p class="red-text">￥<span class="price-text">1000.00</span></p>
            </td>
            <td class="td-total">
              <p class="red-text">￥<span class="total-text">4000</span>.00</p>
            </td>
            <td class="td-do">
			 <a href="javascript:;" class="product-btn green">收藏</a>
			<a href="javascript:;" class="product-btn">移除</a>
			</td>
          </tr> -->
        </tbody>
      </table>
    </div>
    <div class="cart-product-info">
      <a class="delect-product" href="javascript:;"><span></span>删除所选商品</a>
      <a class="keep-shopping" href="#"><span></span>继续购物</a>
      <a class="btn-buy fr" href="javascript:;">结算</a>
      <p class="fr product-total">￥<span>7200.00</span></p>
      <p class="fr check-num">共<strong><span>3</span></strong>件商品总计(不含运费)：</p>
    </div>
  </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  var productList = [{
      'pro_name': 'iphone6s', //产品名称
      'pro_brand': 'iphone', //品牌名称
      'pro_place': '美国', //产地
      'pro_depot': '上海仓库', //所在仓库
      'pro_num': 3, //数量
      'pro_img': './timg.png', //图片链接
      'pro_price': 2000,
      //单价
    },
    {
      'pro_name': 'vans板鞋', //产品名称
      'pro_brand': 'vans', //品牌名称
      'pro_place': '美国', //产地
      'pro_depot': '北京仓库', //所在仓库
      'pro_num': 3, //数量
      'pro_img': './shoe.png', //图片链接
      'pro_price': 400 //单价
    },
    {
      'pro_name': '皮带', //产品名称
      'pro_brand': 'lv', //品牌名称
      'pro_place': '韩国', //产地
      'pro_depot': '广州仓库', //所在仓库
      'pro_num': 3, //数量
      'pro_img': './pidai.png', //图片链接
      'pro_price': 1000 //单价
    },

  ];

  //动态添加数据
  for (var product of productList) {
    var total = parseFloat(product.pro_num * product.pro_price).toFixed(2);
    $('tbody').append(
      ` <tr>
            <td class="td-check"><span class="check-span check-true"></span></td>
            <td class="td-product"><img width="98" height="98" src="${product.pro_img}">
              <div class="product-info">
                <h6>${product.pro_name}</h6>
                <p>品牌：${product.pro_brand}&nbsp;&nbsp;产地：${product.pro_place}</p>
                <p>配送仓储：${product.pro_depot}</p>
              </div>
              <div class="clearfix"></div>
            </td>
            <td class="td-num">
              <div class="product-num">
                <a href="javascript:;" class="num-reduce num-do fl"><span></span></a>
                <input type="text" class="num-input" value="${product.pro_num}" readonly>
                <a href="javascript:;" class="num-add num-do fr"><span></span></a>
              </div>
            </td>
            <td class="td-price">
              <p class="red-text">￥<span class="price-text">${product.pro_price}</span></p>
            </td>
            <td class="td-total">
              <p class="red-text">￥<span class="total-text">${total}</span></p>
            </td>
            <td class="td-do">
			   <a href="javascript:;" class="product-btn green">收藏</a>
			   <a href="javascript:;" class="product-btn">移除</a>
			</td>
          </tr>`

    )
    //总计商品数量
    $('.check-num').children().children().text($('tr').length);
  }

  
  //隔行变色
  $('tr:odd').css('background-color', '#F8F8F8');

  //单选
  $('.check-span').on('click', function () {
    if (!$(this).hasClass("check-true")) {
      $(this).addClass('check-true');
    } else {
      $(this).removeClass('check-true');
    }
    if (!$(this).hasClass("check-true")) {
      $('.check-all').removeClass('check-true')
    }
  });

  //多选
  $('.check-all').on('click', function () {
    if ($(this).hasClass("check-true")) {
      $('.check-span').addClass('check-true');
    } else {
      $('.check-span').removeClass('check-true');
    }

  });

  //加
  $('.num-add').on('click', function () {
    var num = $(this).prev().val();
    num++;
    $(this).prev().val(num);
    var nums = parseInt(num);
    var price = parseFloat(($(this).parent().parent().next().children().children().text())).toFixed(2);
    var totalprice = parseFloat(nums * price).toFixed(2);
    $(this).parent().parent().next().next().children().children().text(totalprice);

    var sum = 0;
    for (var i = 0; i < $('.total-text').length; i++) {
      sum += parseFloat($('.total-text')[i].innerHTML);
    }
    $('.product-total').children().text(parseFloat(sum).toFixed(2));
  });

  //减
  $('.num-reduce').on('click', function () {
    var num = $(this).next().val();
    num--;
    if (num > 0) {
      $(this).next().val(num);
    } else {
      var flag = confirm('再减您的商品将会从购物车移除，确定继续吗?');
      if (flag) {
        $(this).parent().parent().parent().remove();
        //总计商品数量
        $('.check-num').children().children().text($('tr').length);
      }
    }

    var nums = parseInt(num);
    var price = parseFloat(($(this).parent().parent().next().children().children().text())).toFixed(2);
    var totalprice = parseFloat(nums * price).toFixed(2);
    $(this).parent().parent().next().next().children().children().text(totalprice);

    var sum = 0;
    for (var i = 0; i < $('.total-text').length; i++) {
      sum += parseFloat($('.total-text')[i].innerHTML);
    }
    $('.product-total').children().text(parseFloat(sum).toFixed(2));
  })

  //单个移除
  $('.td-do').children().next().on('click', function () {
    var flag = confirm('确定要删除商品吗？');
    if (flag) {
      $(this).parent().parent().remove();
    }

    //总计商品数量
    $('.check-num').children().children().text($('tr').length);

    var sum = 0;
    for (var i = 0; i < $('.total-text').length; i++) {
      sum += parseFloat($('.total-text')[i].innerHTML);
    }
    $('.product-total').children().text(parseFloat(sum).toFixed(2));
  })

  //删除所选商品
  $('.delect-product').on('click', function () {
    if ($('.check-true:not(.check-all)').length == 0) {
      alert("您未选择任何商品！");
    } else {
      var flag = confirm('您确定要删除所选商品嘛？');
      if (flag) {
        $('.check-true:not(.check-all)').parent().parent().remove();
      }
    }
  });

  //总计商品数量
  $('.check-num').children().children().text($('tr').length);

  //总价格
    var sum = 0;
    for (var i = 0; i < $('.total-text').length; i++) {
      sum += parseFloat($('.total-text')[i].innerHTML);
    }
    $('.product-total').children().text(parseFloat(sum).toFixed(2));

</script>

</html>